import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import { Button, Form, Input, Space, Toast } from "antd-mobile";
import { Sbianji } from "../../../components/api";
import store from "../../../store";
import { UPDATE_USERNAME } from "../../../store/actionTypes";
import axios from "axios";
// import { Button,  } from 'antd-mobile'
import style from "../bianji/index.module.css";
import Back from "../../common/back";
const { qw, from, button } = style;

export default function Bianji() {
  const { id, avatar_url, username } = useSelector(
    (state) => (state as any).user
  );
  const onFinish = (values: any) => {
    console.log(values);
    const onSubmit = async () => {
      console.log(1111);
      let res = await Sbianji(id, values);
      console.log(res, "123");
    };
    onSubmit();
    store.dispatch({
      type: UPDATE_USERNAME,
      payload: values.username,
    });
    // localStorage.clear()
  };

  const back = () => {
    Toast.show({
      icon: "success",
      content: "保存成功",
    });
    setTimeout(() => {
      window.history.go(-1);
    }, 1000);
  };

  return (
    <div>
      <div style={{ padding: 20 }}>
        <Form
          onFinish={onFinish}
          footer={
            <div className={button}>
              <Button
                block
                type="submit"
                color="primary"
                size="large"
                onClick={() => back()}
              >
                提交
              </Button>
              <Button
                block
                type="reset"
                color="primary"
                size="large"
                onClick={() => {
                  window.history.go(-1);
                }}
              >
                取消
              </Button>
            </div>
          }
        >
          <Form.Header>修改昵称</Form.Header>
          <Form.Item name="username" label="昵称">
            <Input placeholder="请输入昵称" />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
